* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100vh;
}

.container {
    width: 100%;
    height: 100vh;
    background: url('../html/img/img8.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    position: relative;
}

.container .box {
    position: absolute;
    width: 400px;
    height: 400px;
    /* 实现水平垂直居中效果 */
    top: calc(50% - 200px);
    left: calc(50% - 200px);
    background: #ccc;
    transform-style: preserve-3d;
    transform: rotateX(-21deg) rotateY(38deg) rotateZ(0deg) translate3d(38px, 0px, 200px);
}

.container .box>div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
}

.container .box>div>span {
    position: absolute;
    display: block;
    background: #ccc;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    user-select: none;
    border: 1px solid #000;
}

.container .box>div span img {
    /* 设置高宽，加上object-fit属性，图片即可保持原比例，由浏览器自动选择中间部分进行展示 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .box>div span:nth-child(1) {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
}

.container .box>div span:nth-child(2) {
    transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, -200px, 200px);
}

.container .box>div span:nth-child(3) {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, -400px);
}

.container .box>div span:nth-child(4) {
    transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, -200px, -200px);
}

.container .box>div span:nth-child(5) {
    transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(-200px, 0px, 200px);
}

.container .box>div span:nth-child(6) {
    transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(-200px, 0px, -200px);
}